import { PenEventProps } from "@/types";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { Input, Select, Space } from "antd";

export function EventLink(props: PenEventProps) {
  return (
    <>
      <Space style={{ padding: "0" }} className={"w-full"} direction="vertical">
        <FormRowCol label="链接地址">
          <Input.TextArea
            placeholder={"URL"}
            value={props.item.value ? String(props.item.value) : ""}
            onChange={(e) => {
              props.onChange("value", e.target.value, props.index);
            }}
          ></Input.TextArea>
        </FormRowCol>
        <FormRowCol label="打开方式">
          <Select
            className={"w-full"}
            value={props.item.params}
            options={[
              { label: "打开新窗口", value: "_blank" },
              { label: "覆盖当前页面", value: "_self" },
            ]}
            onSelect={(value) => {
              props.onChange("params", value, props.index);
            }}
          />
        </FormRowCol>
      </Space>
    </>
  );
}
